<template>
	<view class="content" :style="{ marginTop: statusBarTop + 'rpx' }">
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		<view class="wrap">
			<u-row gutter="16" align="center">
				<u-col span="3">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<u-avatar :src="avatar" show-sex="true" size="60" @click="pageToMine()"></u-avatar>
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<u-icon name="calendar" size=65 @click="selectDate()"></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<u-search placeholder="请输入搜索内容" v-model="value" input-align="center" :show-action="false"
						border-color=" #dcdfe6" @input="handleInput(value)"></u-search>
				</u-col>
				<u-col span="3"></u-col>
			</u-row>
			<u-row gutter="16" align="center">
				<u-subsection :list="optionList" :current="{currentOption}"></u-subsection>
				<u-subsection :list="dateList" :current="{currentDate}"></u-subsection>
			</u-row>
			<u-mask :show="fullShow" @click="fullShow = false">
				<view class="center" :style="{ marginTop:menuButton + 'rpx' }">
					<view style="width: 95%; height: 90%; overflow: hidden;border-radius: 25rpx">
						<u-image style=" width: 95%;height: 70%; " :src="content" mode="widthFix"
							:lazy-load="true"></u-image>
					</view>
				</view>
			</u-mask>
		</view>
	</view>
</template>

<script>
	export default {
		name: "IndexHeader",
		props: ['currentOption', 'currentDate'],
		data() {
			return {
				statusBarTop: 0,
				menuButton: 0,
				value: '',
				optionList: [{
						name: '日常'
					},
					{
						name: '干饭'
					},
					{
						name: '清单'
					},
					{
						name: '音乐'
					}
				],
				dateList: [{
						name: '全部'
					},
					{
						name: '日期'
					}
				],
				mode: 'date',
				fullShow: false
			};
		},
		computed: {
			avatar() {
				return this.$store.getters.avatar
			},
			nickName() {
				return this.$store.getters.nickName
			}
		},
		created() {
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			this.statusBarTop = statusBarHeight * (750 / windowWidth) + 10;
			this.menuButton = menuButton.bottom + menuButton.height + statusBarHeight;
		},
		methods: {
			handleInput(value) {
				this.$emit('input-change', value);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}
</style>